<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p class="font">个人中心</p>
    </header>
    <!-- 个人信息部分 -->
    <div class="content">
      <!-- 未登录时样式 -->
      <div class="text" v-show="!this.$getSessionStorage('user')">
        <span @click="toLogin">登录</span>
        <span>/</span>
        <span @click="toRegister">注册</span>
      </div>
      <!-- 已登录时样式 -->
      <div class="text" v-show="this.$getSessionStorage('user')">
        <span><img src="../assets/wyz.jpg"></span>
        <span> 欢迎您：{{ user.userName }} !</span>
      </div>
    </div>

    <!-- 表单部分1 -->
    <ul class="list" v-show="this.$getSessionStorage('user')">
      <li class="wallet" @click="toWallet">
        <i class="fa fa-yen" style="margin-right: 3vw;"></i> 我的钱包
      </li>
      <li class="address" @click="toUserAddress">
        <i class="fa fa-map-pin" style="margin-right: 3vw;"></i>收货地址
      </li>
    </ul>
    <div class="blank"></div>
    <!-- 表单部分2 -->
    <ul class="list" v-show="this.$getSessionStorage('user')">
      <li class="shezhi" @click="toMall">
        <i class="fa fa-bank" style="margin-right: 3vw;"></i>积分商城
      </li>
      <li class="shezhi" @click="toCoupons">
        <i class="fa fa-ticket" style="margin-right: 3vw;"></i>我的优惠券
      </li>
    </ul>
    <div class="blank"></div>
    <!-- 表单部分3 -->
    <ul class="list">
      <li class="safe">
        <i class="fa fa-address-card-o" style="margin-right: 3vw;"></i> 账户与安全
      </li>
      <li class="secret">
        <i class="fa fa-lock" style="margin-right: 5vw;"></i>隐私
      </li>
      <li class="view">
        <i class="fa fa-commenting" style="margin-right: 3vw;"></i>通知
      </li>
      <li class="other">
        <i class="fa fa-info" style="margin-right: 6vw;"></i> 关于
      </li>
    </ul>
    <!-- 退出登录按钮 -->
    <div class="button" v-show="this.$getSessionStorage('user')">
      <button @click="exit">退出登录</button>
    </div>
    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../components/Footer.vue';
export default {
  name: 'Person',
  data() {
    return {
      user: {},
    }
  },
  created() {
    if (this.$getSessionStorage('user')) {
      this.user = this.$getSessionStorage('user');
    }
  },
  methods: {
    toLogin() {
      this.$router.push('/login')
    },
    toRegister() {
      this.$router.push({ path: '/register' });
    },
    toUserAddress() {
      this.$router.push({ path: '/userAddress', query: { businessId: this.businessId } });
    },
    toWallet() {
      this.$router.push({ path: '/wallet' });
    },
    toMall() {
      if (this.$getSessionStorage('user'))
        this.$router.push({ path: '/mall', query: { userId: this.user.userId } })
    },
    toCoupons() {
      if (this.$getSessionStorage('user'))
        this.$router.push({ path: '/coupons', query: { userId: this.user.userId } })
    },
    exit() {
      if (this.$getSessionStorage('user')) {
        let obj = JSON.parse(localStorage.getItem('selected'));
        obj.typeId = 0;
        localStorage.setItem('selected', JSON.stringify(obj));

        localStorage.setItem('couponList', 0)
        sessionStorage.removeItem('user');
        sessionStorage.removeItem('token')
        alert('已退出该账号！')
        location.reload();
      }
    }
  },
  components: {
    Footer
  }
}
</script>

<style scoped>
/*********** 总容器 ***********/
.wrapper {
  width: 100%;
  height: 100%;
  background: rgb(240, 240, 240);
}

/*********** header部分 ***********/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  /* 提高层次 */
  z-index: 1000;

  display: flex;
  justify-content: space-around;
  align-items: center;
}

.wrapper .blank {
  padding: 3vw;
}

/*********** 个人信息部分 ***********/
.wrapper .content {
  width: 100%;
  margin-top: 12vw;
  background-color: #fff;
}

.wrapper .content .text {
  width: 100%;
  box-sizing: border-box;
  padding: 5vw 5vw;
  border-bottom: solid 1px #ddd;
  user-select: none;
  cursor: pointer;

  display: flex;
  align-items: center;
}

.wrapper .content .text span {
  font-size: 6vw;
}

.wrapper .content .text span img {
  width: 25vw;
  height: 25vw;
  margin-right: 5vw;
  border-radius: 50%;
}

/* 表单部分 */
.wrapper .list {
  width: 100%;
  background-color: #fff;
}

.wrapper .list li {
  width: 100%;
  box-sizing: border-box;

  padding: 5vw 5vw;
  border-bottom: solid 1px #ddd;
  user-select: none;
  cursor: pointer;
  font-size: 4vw;
  font-weight: 600;

  display: flex;
  align-items: center;
}


/* 退出登录按钮部分 */
.wrapper .button {
  padding-bottom: 20vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(240, 240, 240);
}

.wrapper button {
  margin-top: 7vw;
  font-size: 16px;
  padding: 3.5vw 30vw;
  background-color: #0097ff;
  border-radius: 25px;
  border: none;
  color: #fff;
}
</style>